<template>
  <el-drawer v-model="dialogVisible" title="聊天记录" direction="rtl" size="50%">
    <div
      v-for="item in list"
      :key="item.id"
      class="mb5 flex justify-between b-b-1px b-b-#414243 b-b-solid pb3 last-b-b-none"
    >
      <div class="flex flex-col justify-between">
        <div>
          <dict-text :type="DICT_TYPE.PAY_TYPE" :value="item.type || ''" />
        </div>
        <div class="font-size-4 color-gray">{{ formatDate(item.createTime) }}</div>
      </div>
      <div class="text-right">
        <div>
          <dict-tag :type="DICT_TYPE.WITHDRAW_STATUS" :value="item.status || ''" />
        </div>
        <div class="font-size-6"><small class="font-size-4">￥</small>{{ item.price }}</div></div
      >
    </div>

    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </el-drawer>
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as BrokerageWithdrawApi from '@/api/blind/brokerageWithdraw'

const dialogVisible = ref(false) // 弹窗的是否展示
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: 0
})

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  getList(id)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹

/** 查询列表 */
const getList = async (id: number) => {
  queryParams.id = id
  const data = await BrokerageWithdrawApi.getBrokerageWithdrawPage(queryParams)
  list.value = data.list
  total.value = data.total
}
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
